<template>
	<div class="tab-module" :style="styleValue">
		<div ref="refHeader" class="conf-module-header">
			<div v-if="props.showPageTools" class="conf-module-tools">
				<slot name="Slot-Conf-Module-Tools-Left" extra="页面的筛序组件和按钮等"></slot>

				<slot name="Slot-Conf-Module-Tools-Right" extra="页面的筛序组件和按钮等"></slot>
			</div>
		</div>
		<div v-if="props.contentCustom" class="custom-Content">
			<slot name="Slot-Conf-Module-custom-Content" extra="页面的具体内容等"></slot>
		</div>
		<div ref="refContent" v-else class="conf-module-content">
			<vue-scroll @handle-scroll="handleScroll">
				<div class="_container">
					<slot name="Slot-Conf-Module-Content" extra="页面的具体内容等"></slot>
				</div>
			</vue-scroll>
			<div style="position: absolute; bottom: 0; width: 100%">
				<slot name="Slot-Table-Batch-Operation" extra=""></slot>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
interface TsProps {
	showPageTools?: boolean;
	contentCustom?: boolean;
}
const props = withDefaults(defineProps<TsProps>(), {
	showPageTools: false,
	contentCustom: false
});

const styleValue = reactive({
	'--header-h': '45px',
	'--main-height': '0px',
	'--header-border-bottom': '1px solid transparent'
});
const handleScroll = (vertical: Record<string, any>): void => {
	styleValue['--header-border-bottom'] = vertical.scrollTop > 3 ? '1px solid rgba(211, 211, 211, 0.2)' : '1px solid transparent';
};
const refHeader = ref(null);
const refContent = ref(null);
onMounted(() => {
	let observer = new ResizeObserver((entries) => {
		styleValue['--header-h'] = (entries[0].target as HTMLDivElement).offsetHeight + 'px';
		console.log('66', styleValue['--header-h']);

		nextTick(() => {
			if (refContent.value) {
				styleValue['--main-height'] = (refContent.value as HTMLDivElement).offsetHeight + 'px';
			}
		});
	});

	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
	observer.observe(refHeader.value!);
});
</script>

<style lang="less" scoped>
.tab-module {
	height: 100%;

	.conf-module-header {
		border-bottom: var(--header-border-bottom);

		.conf-module-header-title {
			display: flex;
			align-items: center;
			height: 76px;
			padding: 20px 32px;
		}

		.conf-module-tools {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 44px;
			padding: 0 32px;
			padding-right: 39px;
		}
	}

	.conf-module-content {
		// 减去的 1px 是顶部在页面处于滚动的情况下,出现的borderBottom宽度
		position: relative;
		overflow-y: auto;
		height: calc(100% - var(--header-h) - 11px);

		._container {
			padding: 0 32px;
		}
	}
}
</style>
